<template>
  <div class="blogs">
    <div class="header">
      <div class="searchcard">
        <h2 style="font-size: 45px">论坛中心</h2>
        <!-- <h2>搜索论坛</h2>
        <div class="searchinput">
          <el-input
            v-model="searchtitle"
            placeholder="输入论坛关键字进行搜索"
            clearable
          />
          <el-button color="#545c64" @click="getforuDate">搜索</el-button>
        </div> -->
      </div>
    </div>
    <div class="blogs-list" style="display: flex">
      <div>
        <h4>热门发帖</h4>
        <ul class="list" style="flex: 1">
          <li v-for="item in hotTableData" :key="item.id" class="item">
            <div class="content" @click="godetail(item.id)">
              <h5 class="title">{{ item.title }}</h5>
              <p class="description">{{ item.content }}</p>
              <div class="meta">
                <el-row>
                  <el-col :span="8">
                    <el-tooltip content="阅读量" placement="top" effect="light">
                      <span
                        ><el-icon><View /></el-icon> {{ item.clicknum }}</span
                      >
                    </el-tooltip>
                    <el-tooltip content="评论量" placement="top" effect="light">
                      <span
                        ><el-icon><ChatDotSquare /></el-icon>
                        {{ item.commenton }}</span
                      ></el-tooltip
                    >
                  </el-col>
                  <el-col :span="8"></el-col>
                  <el-col :span="8">
                    <span>{{ item.user.name }}</span>
                    <span>{{
                      new Date(item.createTime).toLocaleString()
                    }}</span></el-col
                  >
                </el-row>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div style="padding: 0 10px">
        <el-divider direction="vertical" style="height: 100%"></el-divider>
      </div>
      <div>
        <h4>最新发帖</h4>
        <ul class="list" style="flex: 1">
          <li v-for="item in newTableData" :key="item.id" class="item">
            <div class="content" @click="godetail(item.id)">
              <h5 class="title">{{ item.title }}</h5>
              <p class="description">{{ item.content }}</p>
              <div class="meta">
                <el-row>
                  <el-col :span="8">
                    <el-tooltip content="阅读量" placement="top" effect="light">
                      <span
                        ><el-icon><View /></el-icon> {{ item.clicknum }}</span
                      >
                    </el-tooltip>
                    <el-tooltip content="评论量" placement="top" effect="light">
                      <span
                        ><el-icon><ChatDotSquare /></el-icon>
                        {{ item.commenton }}</span
                      ></el-tooltip
                    >
                  </el-col>
                  <el-col :span="8"></el-col>
                  <el-col :span="8">
                    <span>{{ item.user.name }}</span>
                    <span>{{
                      new Date(item.createTime).toLocaleString()
                    }}</span></el-col
                  >
                </el-row>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!--分页-->
  <div>
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="pageNum"
      :page-sizes="[15, 30, 50]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin: 30px auto; justify-content: center"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: 'Forumcenter',
  data() {
    return {
      tableData: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      searchuserid: '', //搜索证号
      searchtitle: '', //搜索名称
      form: {},
    };
  },
  computed: {},
  methods: {
    // 查看
    godetail(id) {
      // console.log(id);
      this.$router.push({
        name: 'forumcenterdetail',
        query: {
          forumid: id,
        },
      });
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getforuDate();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getforuDate();
    },
    //分页查询
    getforuDate() {
      this.$http
        .get('/inoculations/forum/pageall', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userid: this.searchuserid,
            title: this.searchtitle,
          },
        })
        .then((res) => {
          if (res.statusCode == '200') {
            this.total = res.data.total;
            this.tableData = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error('数据加载失败,请刷新！');
        });
    },
  },
  computed: {
    newTableData() {
      return this.tableData.sort((a, b) => {
        return dayjs(b.createTime) - dayjs(a.createTime);
      });
    },
    hotTableData() {
      return this.tableData.sort((a, b) => {
        return b.clicknum - a.clicknum;
      });
    },
  },
  mounted() {},
  created() {
    this.getforuDate();
  },
};
</script>

<style scoped>
.item {
  padding: 10px;
}
.blogs {
  /*左对齐*/
  margin: 58px;
  margin-top: 88px;
  padding: 15px;
  box-shadow: 7px 15px 40px #dfe3e3;
  background-color: #fff;
  border-radius: 10px;
}
.blogs-list {
  padding: 20px;
}
.header {
  width: 100%;
  height: 200px;
}

li {
  /*去除起前面的点*/
  list-style-type: none;
  /*内部间距*/
  padding: 15px 0 10px;
  /*每篇下面的实线*/
  border-bottom: 2px solid #f0f0f0;
}
/*标题，鼠标，悬浮，变灰色*/
li:hover .title {
  color: #87cefa;
}
/**/
.searchcard {
  height: 200px;
  width: 100%;
  text-align: center;
  background-image: url('../../../assets/forumacenter.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.searchcard h2 {
  color: white;
  line-height: 70px;
  margin-bottom: 20px;
}
.el-input {
  width: 65%;
  margin-right: 10px;
  height: 36px;
}
.el-button {
  font-size: 13px;
  width: 80px;
  height: 36px;
}
.description {
  min-height: 30px;
  margin: 4px 0 4px;
  font-size: 14px;
  color: #555;
}
.meta {
  font-size: 13px;
  line-height: 20px;
}
span {
  margin-right: 12px;
  color: #666;
}
.title {
  color: #333;
  margin: 7px 0 7px;
  font-size: 20px;
  line-height: 1.5;
}
/deep/.el-pagination__total {
  margin-left: var(--el-pagination-item-gap);
  font-weight: 400;
  color: #ffffff;
}
/deep/.el-pagination__jump {
  display: flex;
  align-items: center;
  margin-left: var(--el-pagination-item-gap);
  font-weight: 400;
  color: #fff;
}
</style>
